<template>
  <el-row class="pd-lr-20">
    <el-col :span="11">
      <div class="menu-title">前台</div>
      <el-tree
        ref="frontMenuTree"
        :data="frontMenuData"
        node-key="id"
        :props="defaultMenuProps"
        :default-checked-keys="defaultMultiMenu"
        :expand-on-click-node="false"
        default-expand-all
        :show-checkbox="isMultiSelect"
        class="menu-list"
        @node-click="_handleCurrentSingleMenu"
      />
    </el-col>
    <el-col :span="2"><el-divider direction="vertical" /></el-col>
    <el-col :span="11">
      <div class="menu-title">后台</div>
      <el-tree
        ref="manegeMenuTree"
        :data="manegeMenuData"
        class="menu-list"
        node-key="id"
        :expand-on-click-node="false"
        :props="defaultMenuProps"
        :default-checked-keys="defaultMultiMenu"
        default-expand-all
        :show-checkbox="isMultiSelect"
        @node-click="_handleCurrentSingleMenu"
      />
    </el-col>
  </el-row>
</template>

<script>
import { getAllMenu } from './api'
import { tree } from '../../utils/tree'
export default {
  props: {
    isMultiSelect: { type: Boolean, default: true },
    selectedMenuList: {
      type: Array,
      default() {
        return []
      },
    },
    selectedSingleMenu: {
      type: Object,
      default() {
        return { id: '' }
      },
    },
  },
  data() {
    return {
      defaultMultiMenu: [],
      frontMenuData: [],
      manegeMenuData: [],
      currentMenu: null,
      defaultMenuProps: {
        children: 'children',
        label: 'name',
      },
    }
  },
  watch: {
    selectedMenuList(menus) {
      this.defaultMultiMenu = menus
        .filter(item => {
          return item.pid !== '0'
        })
        .map(item => {
          return item.id
        })
      this.$nextTick(() => {
        this.$refs.frontMenuTree.setCheckedKeys(this.defaultMultiMenu)
        this.$refs.manegeMenuTree.setCheckedKeys(this.defaultMultiMenu)
      })
    },
  },
  created() {
    this._getMenuData()
    // console.log(getAllMenu('FRONT'), getAllMenu('MANEGE'))
  },
  methods: {
    async _getMenuData() {
      this.frontMenuData = tree(await getAllMenu('FRONT'))
      this.manegeMenuData = tree(await getAllMenu('MANEGE'))
      this.defaultMultiMenu = this.selectedMenuList
        .filter(item => {
          return item.pid !== '0'
        })
        .map(item => {
          return item.id
        })
    },
    _handleCurrentSingleMenu(currentMenu) {
      this.currentMenu = currentMenu
    },
    getMenuList() {
      const frontMenu = this.$refs.frontMenuTree.getCheckedNodes(false, true)
      const manegeMenu = this.$refs.manegeMenuTree.getCheckedNodes(false, true)
      return frontMenu.concat(manegeMenu)
    },
    getMenu() {
      return this.currentMenu
    },
  },
}
</script>

<style lang="scss" scoped>
.menu-list {
  max-height: 46.8vh;
  overflow: hidden;

  &:hover {
    overflow: auto;
  }
}

.menu-title {
  margin: 10px auto;
  text-align: center;
}

::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  background: #666;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
  transition: background 1s;
}

::-webkit-scrollbar-track {
  background: #ededed;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

::v-deep {
  .el-divider--vertical {
    height: 51.8vh;
  }
}
</style>
